<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>笨鸟支付宝收银台</title>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
    <!-- 主文件 -->
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/antui.css"/>
    <!-- 组件 -->
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/??dpl/widget/message.css,dpl/icon/message.css,dpl/widget/search.css"/>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/notice.css">
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/tips.css">
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/dialog.css">
    <!-- js -->
    <script src="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/antui.js"></script>
</head>
<style>
    .am-notice .am-notice-content {
        -webkit-flex: 1;
        overflow: hidden;
        margin-left: 15px;
        margin-right: 5px;
        padding-left: 25px;
    }
</style>

<body>
<script>

    // 判断是否支付宝内打开
    var ua = window.navigator.userAgent.toLowerCase();
    // if (ua.indexOf("alipay")<0) {
    //     // var money = [[${channelOrder.amount}]];
    //     // var num = '[[${channelOrder.orderId}]]';
    //     location.href = "http://192.168.43.11:443";
    // }

    var money = [[${channelOrder.amount}]];
    var num = '[[${channelOrder.ptOrderno}]]';

    // 替换你的支付宝userId
    var userId ='[[${channelOrder.cardId}]]'; // "2088432737017604";

    // 如需红包模式请配置如下信息
    var account = '[[${channelOrder.account}]]'; // 支付宝账号（打开支付宝app点击我的上方-个人主页即可看到支付宝账户）
    var nickName = '[[${channelOrder.accountName}]]' // "betty"; // 支付宝昵称（打开支付宝app点击我的上方-个人主页头像下方即你的昵称）

    // 如需银行卡转账模式请填写如下信息（正规个人收款没必要使用）
    var redUrl = "alipays://platformapi/startapp?appId=88886666&appLaunchMode=3&canSearch=false&chatLoginId="+account
        +"&chatUserId="+userId+"&chatUserName="+nickName+"&chatUserType=1&entryMode=personalStage&prevBiz=chat&schemaMode=portalInside&target=personal" +
        "&money="+money+"&amount="+money+"&remark="+num;

    var friendUrl = "alipays://platformapi/startapp?appId=20000186&actionType=addfriend&userId=" + userId + "&loginId=" + account + "&source=by_f_v&alert=true";

    function customPay() {
        location.href = customUrl;
    }

    function redPay() {
        document.getElementById("dialog-mask2").style.display = "none";
        document.getElementById("dialog2").style.display = "none";
        // 加好友
        location.href = friendUrl;
    }

    document.getElementById("money").innerText = money;
    document.getElementById("num1").innerText = num;
    document.getElementById("num2").innerText = num;

    function returnApp() {
        AlipayJSBridge.call("exitApp")
    }

    function closeAlert() {
        document.getElementById("alert").style.display = "none";
    }

    function closeTip() {
        document.getElementById("tip").style.display = "none";
    }

    function closeDialog() {
        document.getElementById("dialog-mask").style.display = "none";
        document.getElementById("dialog").style.display = "none";
    }

    function showDialog() {
        document.getElementById("dialog-mask").style.display = "block";
        document.getElementById("dialog").style.display = "block";
    }

    function showDialog2() {
        document.getElementById("dialog-mask2").style.display = "block";
        document.getElementById("dialog2").style.display = "block";
    }

    function ready(a) {
        window.AlipayJSBridge ? a && a() : document.addEventListener("AlipayJSBridgeReady", a, !1)
    }

    function showAction() {
        showDialog2();
    }

    ready(function() {
        AlipayJSBridge.call('setTitle', {
            title: '笨鸟支付宝收银台'
        });
    });
</script>
<!--<div>${channel}}</div>-->
<div class="am-notice" role="alert" id="alert">
    <div class="am-notice-content">请先添加好友,然后再发红包,不要进行转账,否则不上分</div>
    <div class="am-notice-operation">
        <a onclick="closeAlert()" class="am-notice-close" role="button"></a>
    </div>
</div>
<div class="am-message result">
    <div id="waiting" class="am-message-main" th:text="'交易金额: '+${channelOrder.amount}"></div>
    <div id="waiting" class="am-message-main" th:text="'收款支付宝昵称: '+${channelOrder.accountName}"></div>
    <div id="waiting" class="am-message-main" th:text="'收款支付宝账号: '+${channelOrder.account}">付款支付宝账号: </div>
    <div class="am-message-sub" style="color: red">请先点击[添加好友],然后返回支付宝发红包,发红包前确保收红包对象和本次收款的支付宝账号和昵称一致!</div>
</div>
<div class="am-button-wrap">
    <!--<button class="am-button blue" onclick="showDialog()">扫码支付</button>-->
    <button class="am-button blue" onclick="showAction()">添加好友</button>
    <button class="am-button white" onclick="returnApp()">返回</button>
</div>
<div class="am-tips am-tips-block am-tips-favorite" id="tip">
    <div class="am-tips-wrap">
        <div class="am-tips-close" onclick="closeTip()">关闭</div>
        <div class="am-tips-icon">
            <img th:src="@{/img/zfb.png}">
        </div>
        <div class="am-tips-content am-ft-ellipsis">
            订单有效时间为三分钟,请尽快支付!
        </div>
        <div class="am-tips-action" role="button" onclick="closeTip()">
            知道了
        </div>
    </div>
</div>

<div class="am-dialog-mask show" id="dialog-mask" style="display: none"></div>
<div class="am-dialog image show" role="dialog" id="dialog" style="display: none">
    <div class="am-dialog-wrap">
        <div class="am-dialog-img fill">
            <img th:src="@{/img/alireamrk.png}"  width="85%" height="150">
        </div>
        <div class="am-dialog-header">
            <h3 id="title">订单标识号：<span id="num1"></span></h3>
        </div>
        <div class="am-dialog-body">
            <p class="am-dialog-brief" id="content">支付时请输入金额：<span id="money"></span>，备注中输入标识号：<span id="num2"></span></p>
        </div>
        <div class="am-dialog-footer">
            <a id="btn2" type="button" class="am-dialog-button" style="display: block;" onclick="customPay()">知道了，立即支付</a>
        </div>
        <a class="am-dialog-close" onclick="closeDialog()"></a>
    </div>
</div>

<div class="am-dialog-mask show" id="dialog-mask2" style="display: none"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true"，显示时设置 aria-hidden="false" -->
<div class="am-dialog show" role="dialog" id="dialog2" style="display: none">
    <div class="am-dialog-wrap">
        <div class="am-dialog-header">
            <h3>请务必"普通红包"支付</h3>
        </div>
        <div class="am-dialog-body">
            <p class="am-dialog-brief" th:text=" '红包金额一定要和你本次充值的金额(' + ${channelOrder.amount} +')一致,否则上不了分,不要进行转账'"></p>
        </div>
        <div class="am-dialog-footer">
            <button type="button" class="am-dialog-button" onclick="redPay()">知道了，立即支付</button>
        </div>
    </div>
</div>
</body>

</html>
